<template>
  <div>
    <el-dialog :title="`${$t('basic.stage')}：${formData.phaseDesc}`" :visible.sync="isShowIFO" :close-on-click-modal="false"
      :before-close="handleClose" :width="screenWidth > 1310 ? '55%' : '70%'" v-dialogDrag>
      <el-form :model="formData" label-width="70px" ref="ruleForm" size="mini" :rules="rules" :hide-required-asterisk="true">

        <el-row :gutter="24" class="gz-form-row">
          
          <el-col :xs="5" :sm="4" :md="4" :lg="3" :xl="3">
            <el-form-item label="" label-width="0">
              <el-checkbox v-model="formData.isAuto">{{$t('common.auto_start')}}</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="6">
            <el-form-item :label="$t('common.start_delay')" label-width="70px" class="inputPadding">
              <el-input type="number" v-model="formData.delayTime">
                <template slot="append">min</template>
              </el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item :label="$t('basic.stage_name')" prop="phaseDesc">
              <el-input disabled v-model="formData.phaseDesc" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row :gutter="24" class="gz-form-row">
          <el-col :xs="5" :sm="4" :md="4" :lg="3" :xl="3">
            <el-form-item label="" label-width="0">
              <el-checkbox v-model="formData.mode">{{$t('common.operation_signature')}}</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :xs="5" :sm="5" :md="5" :lg="3" :xl="3">
            <el-form-item label="" label-width="0">
              <el-checkbox v-model="formData.checks">{{$t('common.review_confirmation')}}</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="7" :xl="7">
            <el-form-item label="结束模式">
              <el-select v-model="formData.overModel" placeholder="">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="35">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label-width="0">
              <!-- <el-checkbox v-model="formData.confirm"> -->
              <p style="font-weight: bold">{{$t('recipe.phase_info')}}</p>
              <!-- </el-checkbox> -->
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item :label="$t('common.operating_instructions')" prop="guideInfo">
              <el-input rows="3" type="textarea" v-model="formData.guideInfo" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item :label="$t('basic.remarks')">
              <el-input rows="3" type="textarea" v-model="formData.flastModifyComment" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" :disabled="isreadOnly" :loading="loading"
          @click="handleConfirm('ruleForm')">{{ $t("common.preservation") }}</el-button>
        <el-button @click="handleClose()" size="small">{{ $t("common.cancel") }}</el-button>
      </span>

    </el-dialog>
  </div>
</template>

<script>
import { formula } from "@/api/formula"
export default {
  props: {
    isShowIFO: Boolean,
    tdIndex: Number,
    stepObj: Object,
    isreadOnly: Boolean
  },
  data () {
    return {
      screenWidth: document.body.clientWidth,
      formData: {
        phaseDesc: "信息提示",
        stepDesc: "",
        isActive: false,
        seqNo: "",
        delayTime: "",
        mode: "",
        checks: "",
        stepNo: "",
        isAuto: true,
        confirm: "",
        flastModifyComment: "",
        guideInfo: "",
        stepSort: 0,
        overModel: 0,
      },
      loading: false,
      stepLoading: false,
      rules: {
        guideInfo: [{ required: true, message: '请输入操作说明', trigger: 'change' }],
      },
      list: [],
      phaseId: "",
      options: [{
        label: "手动结束",
        value: "0"
      }, {
        label: "自动结束",
        value: "15"
      },],
    }
  },
  watch: {
    screenWidth (val) {
      this.screenWidth = Number(val)
    },
    isShowIFO (val) {
      if (val) {
        this.formData.stepDesc = this.stepObj.stepDesc ?? this.stepObj.texts
        this.formData.isActive = this.stepObj.isActive == 1 ? true : false
        this.formData.seqNo = this.stepObj.seqNo
        this.formData.phaseDesc = this.stepObj.texts
        this.formData.isAuto = this.stepObj.isAuto == 1 ? true : false
        this.formData.confirm = this.stepObj.confirm == 1 ? true : false
        this.formData.seqNo = this.stepObj.seqNo

        this.formData.stepNo = this.tdIndex
        this.formData.mode = this.stepObj.mode == 1 ? true : false
        this.formData.checks = this.stepObj.checks == 1 ? true : false
        this.formData.delayTime = this.stepObj.delayTime ?? 0

        this.formData.flastModifyComment = this.stepObj.flastModifyComment
        this.formData.guideInfo = this.stepObj.guideInfo
        this.phaseId = this.stepObj.fid
        this.formData.stepSort = this.stepObj.stepSort ?? 0
        this.formData.overModel = this.stepObj.spare2 ?? "0"
      } else {
        for (let key in this.formData) {
          this.formData[key] = ""
        }
      }
    }
  },
  mounted () {
    const that = this
    window.addEventListener('resize', function () {
      that.screenWidth = document.body.offsetWidth;
    })
  },
  created () {

  },
  methods: {
    phaseAutoFind () {
      const param = {
        phaseVo: {
          stepId: this.stepObj.fid
        }
      }
      formula.phaseInfoList(param).then(res => {
        if (res.code == 200) {
          if (res.data.rows.length > 0) {
            this.list = res.data.rows
            this.formData = Object.assign({}, res.data.rows[0])
            this.formData.stepDesc = this.stepObj.stepDesc
            // this.formData.isActive = this.stepObj.isActive == 1 ? true : false
            this.formData.phaseDesc = "信息提示"
            this.formData.seqNo = this.tdIndex
            this.phaseInfoFind(res.data.rows[0].fid)
          }

        }
      })
    },
    handleConfirm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let param = {
            phaseDesc: this.formData.phaseDesc,
            isAuto: this.formData.isAuto == false ? 0 : 1,
            isActive: this.formData.isActive == false ? 0 : 1,
            checks: this.formData.checks == false ? 0 : 1,
            delayTime: this.formData.delayTime,
            operationId: this.stepObj.operationId,
            confirm: this.formData.confirm == false ? 0 : 1,
            flastModifyComment: this.formData.flastModifyComment,
            guideInfo: this.formData.guideInfo,
            mode: this.formData.mode == false ? 0 : 1,
            type: this.stepObj.type,
            seqNo: this.stepObj.seqNo,
            stepNo: this.stepObj.stepNo,
            phaseCode: this.stepObj.phaseCode,
            serialNo: this.stepObj.serialNo,
            stepSort: this.formData.stepSort,
            spare2: this.formData.overModel,
          }
          if (this.phaseId) {
            param.fid = this.phaseId
          }
          this.loading = true
          formula.phaseInfoAdd(param).then(res => {
            this.loading = false
            if (res.code == 200) {
              let obj = {
                mode: this.stepObj.mode,
                isAuto: this.formData.isAuto == false ? 0 : 1,
                isActive: this.formData.isActive == false ? 0 : 1,
                operationId: this.stepObj.operationId,
                seqNo: this.stepObj.seqNo,
                serialNo: this.stepObj.serialNo,
                text: this.stepObj.phaseDesc
              }
              this.$emit("uptionData", obj)
              this.$emit("closePH", "IFO")
            } else {
              this.$message.error(res.msg);
            }
          })
        }
      })
    },
    handleClose () {
      this.$emit("closePH", "IFO")
    },
    handleIsAuto (val) {
      this.$forceUpdate()
    },
    changeCheck (val) {
      this.$forceUpdate()
    },
  }
}
</script>
